<template>
  <div id="consult">
    <div id="entirety" style="background-image: url('/static/background/background.png')">
      <div v-show="!showGraph" class="wholeDiv">
        <div class="top-wrapper">
          <span style="color: white; margin-top: 10px">已选择云商：</span>
          <el-tag v-for="item in selectedSupplier" :key="item.id" effect="dark" style="margin-right: 20px; margin-top: 10px" type="success">
            {{ item.name }}
          </el-tag>
          <el-tag v-for="item in selectedPrivateSupplier" :key="item.id" effect="dark" style="margin-right: 20px; margin-top: 10px">
            {{ item.name }}
          </el-tag>
          <el-button :disabled="this.selectedSupplier.length + this.selectedPrivateSupplier.length < 2" size="mini"
                     style="margin-top: 10px" type="primary"
                     @click="doConsult">磋商
          </el-button>
        </div>
        <el-row>
          <el-col :span="17">
            <el-row :gutter="10" style="min-height: 85vh">
              <!-- 云商列表 -->
              <el-col v-for="item in dataListNew" :key="item.id" :span="8">
                <!-- 每个云商  -->
                <el-card class="card" style="overflow: auto">
                  <el-row style="display: flex; align-items: center">
                    <el-checkbox v-model="item.checked" :disabled="item.initList.length === 0" style="color: white;margin-left:5px;"
                                 @change="handleCheckboxChange(item)"></el-checkbox>
                    <span class="title-name" style="margin-left: 5px">{{ item.name }}</span>
                    <el-popover v-model="item.visible" placement="bottom" popper-class="custom-poporange" style="color: #bbf0ff" trigger="click">
                      <el-cascader-panel ref="cascader" v-model="item.selectedSupplierList" :options="item.initList"
                                         :props="{multiple: true, value: 'id', label: 'name'}"
                                         :show-all-levels="false" placeholder="请选择" @change="handleCascaderChange(item)"></el-cascader-panel>
                      <i slot="reference" class="el-icon-arrow-down" style="cursor: pointer; margin-top: 3px"></i>
                    </el-popover>
                    <el-tag :type="item.type === '公有云'?'success': ''" effect="plain" size="mini" style="margin-left:20px">{{ item.type }}
                    </el-tag>
                  </el-row>
                  <div style="margin-top: 10px">
                    <el-row v-for="(prop, index) in item.props" :key="index" style="margin-top: 15px; margin-left: 5px;">
                      <el-col :span="1">
                        <el-checkbox v-show="item.checked" style="margin-top:10px;" v-model="prop.test" @change="change"/>
                      </el-col>
                      <el-col :offset="1" :span="3">
                        <div style="padding-top: 5px;text-align: center;">
                          <el-image :src="require('./pic/' + prop.type + '.svg')" alt="img" style="width: 30px"/>
                        </div>
                      </el-col>
                      <el-col :offset="1" :span="16">
                        <el-row style="margin-top: 3px;font-size: 12px;">
                          <el-col :span="7" style="text-align: left">
                            <span style="color: #ffffff">{{ prop.name }}</span>
                          </el-col>
                          <el-col :span="17" style="text-align: right;padding-right: 70px;">
                            <span style="color: #ffffff">{{ prop.value }}/{{ prop.total }}</span>
                          </el-col>
                        </el-row>
                        <el-progress :color="customColorMethod" :stroke-width="10" :text-inside="false"
                                     :percentage="parseFloat(((prop.value * 100) / prop.total).toFixed(2))" />
                      </el-col>
                      <el-col :offset="6" :span="18" v-show="prop.test && item.checked">
                        <el-radio-group size="mini" v-model="prop.test1">
                          <el-radio-button label="使用" value="0"></el-radio-button>
                          <el-radio-button label="复制" value="1" disabled></el-radio-button>
                          <el-radio-button label="交易" value="2"></el-radio-button>
                        </el-radio-group>
                      </el-col>
                      <el-col :offset="6" :span="12" v-show="prop.test && prop.test1 == '使用' && item.checked" style="margin-top: 3px;">
                        <el-input placeholder="请输入配额" size="mini" v-model="prop.test3" @input="change"/>
                      </el-col>
                      <el-col :offset="6" :span="12" v-show="prop.test && prop.test1 == '复制' && item.checked" style="margin-top: 3px;">
                        <el-input placeholder="请输入配额" size="mini" v-model="prop.test4" @input="change"/>
                      </el-col>
                      <el-col :offset="6" :span="12" v-show="prop.test && prop.test1 == '交易' && item.checked" style="margin-top: 3px;">
                        <el-input placeholder="请输入配额" size="mini" v-model="prop.test5" @input="change"/>
                      </el-col>
                    </el-row>
                  </div>
                </el-card>
              </el-col>
            </el-row>
          </el-col>
          <!-- 新增右侧三个图 -->
          <el-col :span="7">
            <div style="margin-top:10px;">
              <div id='up_chart' style='height: 28vh'></div>
            </div>
            <div style="">
              <div id='mid_chart' style='height: 28vh'></div>
            </div>
            <div style="">
              <div id='down_chart' style='height: 28vh'></div>
            </div>
          </el-col>
        </el-row>
        <el-drawer :visible.sync="drawerVisible" :with-header="false" direction="rtl">
          <div v-loading="drawerIsLoading" style="
                            background-image: url('/static/background/background.png');
                            height: 100%;
                            padding: 20px;
                        ">
            <h2 style="color: #ffff">{{ drawerTitle }}</h2>
            <div class="table_box">
              <el-table
                :cell-style="{
                                    padding: '0',
                                }"
                :data="drawerTableData"
                :header-cell-style="{
                                    padding: '0',
                                }"
                :header-row-style="{
                                    height: '4vh',
                                }"
                :row-style="{
                                    height: '4vh',
                                }"
                border
                max-height="calc(100vh - 100px)"
                style="overflow: auto"
              >
                <el-table-column
                  v-for="(item, index) in drawerTableColumn"
                  :key="index"
                  :label="item"
                  :prop="item"
                  :show-overflow-tooltip="true"
                  sortable
                ></el-table-column>
              </el-table>
            </div>
          </div>
        </el-drawer>
      </div>
    </div>
  </div>
</template>

<script src="./js/index.js"></script>
<style lang="scss">
@font-face {
  font-family: 'Alternate';
  //src: url('../../assets/iconfont/Alternate.ttf');
  font-style: normal;
  font-width: normal;
}

@import './css/consult.scss';
.ellipsis {
  display: block; /* 或 inline-block，具体根据布局需要调整 */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.custom-poporange {
  background-image: url('/static/background/background.png');

  .el-cascader-node:hover {
    background-color: #28496ea6 !important;
  }

  .el-cascader-node:focus {
    background-color: #28496ea6 !important;
  }

  .el-cascader-node__label {
    color: #ffffff !important;
  }
}
</style>
